<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQery操作DOM</title>
		<!-- JavaScript:核心语法+Dom(针对页面操作)+Bom(针对浏览器)
		 学习主题；针对页面操作比较多---DOM操作
		 JQuery操作Dom  理解JQ框架改变页面效果
		 
		 基础函数---事件源之后出现  事件源语法糖中
		 
		 
		 -->
		 <script src="MI/js/jquery-1.11.1.js" ></script>
		 
		 <div style="width: 200px; height: 200px; background:#000;"></div>
		 <h3>lorem</h3>
		<input type="button" value="按钮2" />
		<input type="text" />
	</head>
	<body>
		<!-- 鼠标点击按钮  ，让后下面产生一行文本 -->
         <button>按钮</button>
		 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas modi doloribus aliquam id dignissimos est. Unde possimus vitae officiis voluptatem laudantium molestiae in officia assumenda harum dicta. Non, fugiat ipsum!</p>
		<script>
			$("button").click(function(){
				// jq操作DOM--html()函数使用
				$("p").html(" <h1>JQ操作DOM-html函数使用</h1>")
				
			});
			
			
			
			$('div').mouseenter( function(){
				$("h3").("<h3>黄色</h3>")
				
			});
			
			//练习2  文本框   点击按牛  文本框增加一行文本
			$("input[type='button']").click(function(){
				//alert("jq选择器是否选中")
				$("input[type='text']").val("文本框内容修改")
				
			});
			//利用jq操作dom  (页面效果)元素内容操作（3个函数）
                                     属性操作 4个  	      
                                     样式类				  
				  
				  
				  
				  
				  
				  
				  
				  
		</script>
		
		
		
	</body>
</html>